import { cn } from "~/utils/classHelper";
import {
  FormControl,
  FormControlProps,
  withFormControl,
} from "solid-form-context";
import {
  ComponentProps,
  createEffect,
  createMemo,
  createSignal,
  Index,
  JSX,
  Show,
  splitProps,
} from "solid-js";
import { is_null_or_undefined } from "~/utils/object";

export const InputText = (props: ComponentProps<"input">) => {
  const [local, rest] = splitProps(props, ["class", "classList", "value"]);
  // const wrappedValue = createMemo(() => ); // 处理undefined显示问题
  return (
    <input
      value={local.value ?? null}
      type="text"
      class={cn(local.class, local.classList)}
      {...rest}
    />
  );
};

export const InputFile = (
  props: ComponentProps<"input"> & { files?: FileList }
) => {
  const [local, rest] = splitProps(props, ["class", "classList"]);
  const [files, setFiles] = createSignal<FileList>();

  return (
    <input type="file" class={cn(local.class, local.classList)} {...rest} />
  );
};

export const InputNumber = (props: ComponentProps<"input">) => {
  const [local, rest] = splitProps(props, ["class", "classList"]);

  return (
    <input {...rest} type="number" class={cn(local.class, local.classList)} />
  );
};

export const Checkbox = (props: ComponentProps<"input">) => {
  const [local, rest] = splitProps(props, ["class", "classList"]);

  return (
    <input
      {...rest}
      type="checkbox"
      class={cn("d-checkbox", local.class, local.classList)}
    />
  );
};

export const TextArea = (props: ComponentProps<"textarea">) => {
  const [local, rest] = splitProps(props, ["class", "classList"]);

  return (
    <textarea
      {...rest}
      class={cn("d-textarea", local.class, local.classList)}
    />
  );
};

export const Toggle = (props: ComponentProps<"input">) => {
  const [local, rest] = splitProps(props, ["class", "classList"]);

  return (
    <input
      {...rest}
      type="d-checkbox"
      class={cn("d-toggle", local.class, local.classList)}
    />
  );
};

export interface SelectOption {
  value: any;
  label?: any;
}

export const Select = (
  props: ComponentProps<"select"> & {
    placeholder?: string;
    options?: SelectOption[];
  }
) => {
  const [local, rest] = splitProps(props, [
    "class",
    "classList",
    "children",
    "placeholder",
    "options",
  ]);

  return (
    <select {...rest} class={cn("d-select", local.classList, local.class)}>
      <option value={""}>{local.placeholder ?? "请选择..."}</option>
      <Index each={local.options ?? []}>
        {(opt, inex) => (
          <option value={opt().value}>{opt().label ?? opt().value}</option>
        )}
      </Index>
    </select>
  );
};
``;
export const FormInputText = withFormControl(InputText);

export const FormInputNumber = withFormControl(InputNumber);

export const FormCheckbox = withFormControl(Checkbox, {
  valuePropName: "checked",
});

const toArrary = <T extends {}>(e: T | T[] | undefined): T[] => {
  if (is_null_or_undefined(e)) {
    return [];
  }

  if (Array.isArray(e)) {
    return e as T[];
  }

  return [e];
};

export const FormInputFile = withFormControl(InputFile, {
  valuePropName: "files",
  valueChangedEventName: "onChange",
  handler: (setter) => (e) => {
    setter?.(e.target.files)
  },
});

export const FormTextArea = withFormControl(TextArea);

export const FormToggle = withFormControl(Toggle, { valuePropName: "checked" });
export const FormSelect = withFormControl(Select);
